<template>
  <view>
    <view class="header-common" :style="{paddingTop: (useAppData.titleHeight+3) + 'px'}">
      <view class="back-box" @tap="gotoBack">
        <image class="back-img" src="../../static/icon-back.png"></image>
      </view>
      <span>我的体检</span>
    </view>
    <ul class="exam-box" v-if="state.examList?.length > 0">
      <li class="exam-item" v-for="(item, index) in state.examList" :key="index" @tap="gotoPage(item)">
        <view class="item-name">
          <text>{{item.name}}</text>
          <p class="line"></p>
          <text>体检报告</text>
        </view> 
        <view class="item-footer">
          <p>会员号：{{item.memberId}}</p>
          <p>{{item.examTime}}</p>
        </view>
      </li>
    </ul>
    <view v-else class="no-record">
      <image class="no-img" src="../../static/no-record.png"></image>
      <text>无记录</text>
    </view>
  </view>
</template>
 
<script setup>
  import { onLaunch, onShow, onHide, onUnload, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
  import { reactive, onMounted } from "vue"
  import * as API from "../../api/api"
  import { storeToRefs } from "pinia";
  import { useExaminationStore } from "../store/examination";
  import { useAppStore } from "../../store/app";
  import { useShareStore } from "../../store/share";
  const useShareData = useShareStore()
  const useAppData = useAppStore()
  const useExaminationData = useExaminationStore()
  const state = reactive({
    examList: [],
    userInfo: null
  })
  
  onShareAppMessage((res) => {
    return useShareData.shareInfo
  })
  onShareTimeline((res) => {
    return useShareData.shareInfo
  })

  const gotoBack = () => {
    uni.navigateBack()
  }

  const gotoPage = (item) => {
    uni.navigateTo({
      url: "/examPages/exam/detail",
      success: function(res) {
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
      }
    });
  }



// age: "30"
// basalMetabolism: "1433"
// bloodPressure: "正常"
// bmi: "一般"
// createBy: null
// createTime: "2024-07-21 13:20:23"
// examTime: "2024-07-20 13:20:23"
// fatRatio: "标准健康"
// gender: "男"
// glycaemic: "正常"
// height: "180"
// lockVersion: null
// memberId: "809217"
// muscleRatio: "标准"
// name: "张三"
// pageNum: null
// pageSize: null
// protein: "10.0"
// score: "70"
// shape: "缺乏运动型"
// totalEnergyMetabolism: "1433"
// triglyceride: "合适水平"
// updateBy: null
// updateTime: null
// userId: "1811675694938329088"
// uuid: "0d087dbb3003028d90a852790853f0cf"
// weight: "50.1"

  onShow(() => {
    state.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : null
    useExaminationData.getPhysicalExamination().then(res => {
      state.examList = res
    })
  })
</script>
 
<style lang="scss" scoped>
  .con-box{
    display: flex;
    justify-content: space-around;
    margin-top: 120rpx;
    .item-box{
      color: #222222;
      text-align: center;
      .item-num{
        font-weight: 600;
        font-size: 44rpx;
      }
      .item-name{
        font-size: 36rpx;
      }
    }
  }
  .no-record{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40rpx;
    color: #222222;
    padding-top: 20vh;
    .no-img{
      width: 200rpx;
      height: 176rpx;
      margin-bottom: 36rpx;
    }
  }
  .exam-box{
    padding: 0 32rpx;
    height: calc(100vh - 240rpx);
    box-sizing: border-box;
    overflow: auto;
    .item-name{ 
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 36rpx;
      color: #1C1C1E;
    }
    .item-footer{
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: rgba(34,34,34,0.6);
      margin-top: 44rpx;
    }
    .line{
      width: 8rpx;
      height: 30rpx;
      background: #C2FCDA;
      border-radius: 36rpx;
      margin: 0 14rpx;
    }
    .exam-item{
      width: 686rpx;
      height: 220rpx;
      margin-bottom: 32rpx;
      padding: 70rpx 24rpx 22rpx 42rpx;
      box-sizing: border-box;
      background: url() 0 0 no-repeat;
      background-size: cover;
    }
  }
</style>